<template>
	<div>
		<Modal
			v-model="isOPen"
			title="添加常用功能"
			@on-cancel="isOk(false)"
			@on-ok="isOk(true)"
		>
			<div class="administrators-seting-roles">
				<Form
					ref="fromData"
					:model="fromData"
					class="isForm"
					:label-width="110"
					:rules="ruleValidate"
				>
					<FormItem class="isFormItem" label="所属系统:" prop="functionName">
						<Input
							class="isFromWidth"
							v-model="fromData.functionName"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="功能名称:" prop="thirdPartyName">
						<Input
							class="isFromWidth"
							v-model="fromData.thirdPartyName"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="功能图标:" prop="icon">
				
						   <icon-choose v-model="fromData.icon"></icon-choose>
					</FormItem>
					<FormItem class="isFormItem" label="地址:" prop="thirdPartyUrl">
						<Input
							class="isFromWidth"
							v-model="fromData.thirdPartyUrl"
						></Input>
					</FormItem>
					<FormItem class="isFormItem" label="说明:" prop="remark">
						<Input
							style="width: 300px"
							maxlength="500"
							show-word-limit
							type="textarea"
							v-model="fromData.remark"
						></Input>
					</FormItem>
					<FormItem
						class="isFormItem isFormItem1"
						label="启用:"
						prop="title"
					>
						<Checkbox v-model="fromData.isOpen">{{ '' }}</Checkbox>
					</FormItem>
				</Form>
				
			</div>
		</Modal>
	</div>
</template>

<script>
import IconChoose from "@/views/my-components/icon-choose";
export default {
	name: 'register-modal',
	components: {IconChoose},
	props: {
		value: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			isOPen: false,
			cityList3: [
				{
					value: 'New York',
					label: 'New York',
				},
				{
					value: 'London',
					label: 'London',
				},
				{
					value: 'Sydney',
					label: 'Sydney',
				},
				{
					value: 'Ottawa',
					label: 'Ottawa',
				},
				{
					value: 'Paris',
					label: 'Paris',
				},
				{
					value: 'Canberra',
					label: 'Canberra',
				},
			],
			fromData: {
				thirdPartyName: '',
				functionName: '',
				remark: '',
				icon: '',
				thirdPartyUrl: '',
				isOpen: true,
			},
			ruleValidate: {
				functionName: [
					{
						required: true,
						message: '请输入所属系统',
						trigger: 'blur',
					},
				],
				thirdPartyUrl: [
					{
						required: true,
						message: '请输入地址',
						trigger: 'blur',
					},
				],
				thirdPartyName: [
					{
						required: true,
						message: '请输入功能名称',
						trigger: 'blur',
					},
				],
				remark: [
					{
						required: true,
						message: '请输入说明',
						trigger: 'blur',
					},
				],
				icon: [
					{
						required: true,
						message: '请选择图标',
						trigger: 'blur',
					},
				],
			},
		}
	},
	watch: {
		value(val) {
			this.isOPen = val
		},
		isOPen(val) {
			this.$emit('input', val)
		},
	},
	computed: {},
	methods: {
		isOk() {},
		handleCreate1(val) {
			this.cityList3.push({
				value: val,
				label: val,
			})
		},
	},
	created() {},
	mounted() {},
}
</script>
<style lang="less" scoped>
.administrators-seting-roles {
	.isFromWidth {
		width: 220px;
	}
	.isFormItem1 {
		margin: 0;
	}
}
</style>